<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Using Google Earth API with the Maps API</title>
<script type="text/javascript" src="http://www.google.com/jsapi?hl=en&key=ABQIAAAANX1UEkx5va-B8I-VAyZHdxRANBwFBV5lvn06w6VGRDTtcJKhxhSlzG5tM-rohRx2QpF9STfBXsDMGQ"></script>
<script type="text/javascript" src="js/math3d.js"></script>
<script type="text/javascript" src="js/policecar.js"></script>
<script type="text/javascript" src="js/blam.js"></script>

<script type="text/javascript">
	var ge;
	var map;
	var policecar;
	var layerRoot;
	var terrainLayer;
	var buildingsLayer;
	var roadLayer;
	
	google.load("earth", "1");
	google.load("maps", "2.x");

	function initialize() { 
		map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(-37.817478, 144.963226), 16);
		map.addMapType(G_HYBRID_MAP);
		map.addMapType(G_SATELLITE_3D_MAP);
		map.addControl(new GHierarchicalMapTypeControl());
		map.addControl(new GLargeMapControl());
		map.addControl(new GScaleControl());
		//map.addControl(new GOverviewMapControl());

		
		// Uncomment the following line to start the map with 3D enabled.
		map.setMapType(G_SATELLITE_3D_MAP);
		//map.setMapType(G_HYBRID_MAP);
		
		// Obtain a pointer to the Google Earth instance attached to your map. 
		map.getEarthInstance(getEarthInstanceCB);
		
		
	}
	
	function getEarthInstanceCB(object) { 
		ge = object; 
		// You can now manipulate ge using the full Google Earth API.
		
		layerRoot = ge.getLayerRoot();
		terrainLayer = layerRoot.getLayerById(ge.LAYER_TERRAIN);
		buildingsLayer = layerRoot.getLayerById(ge.LAYER_BUILDINGS);
		roadLayer = layerRoot.getLayerById(ge.LAYER_ROADS);
		
		// Initial condition: terrain layer not visible, buildings layer visible
		layerRoot.enableLayerById(ge.LAYER_TERRAIN, false);
		layerRoot.enableLayerById(ge.LAYER_BUILDINGS, false);
		layerRoot.enableLayerById(ge.LAYER_ROADS, true);
	}
	
	function uponKeyDown(event) {
		return keyDown(event);
	}
	
	function uponKeyUp(event) {
		return keyUp(event);
	}
	
	function reposPolicecarToMelbourne() {
		if (ge == null) alert("ge is null");
		else {
			policecar = new Policecar();
			document.body.onKeyDown = "alert( 'testing down' )"; 
			document.body.onKeyUp = "alert( 'testing up' )"; 
		}
	}
	
</script>
<script type="text/javascript" src="js/blam.js"></script>
</head>
<body onload="initialize();" onunlaod="GUnload()">

<div align="center">
<table border="0" width="100%" id="tblMain" cellspacing="1">
	<tr>
		<td width="87.89%">
		<div id="map" class="map" style="width: 900px; height: 700px"></div>
		</td>

		<td width="12.11%">
		<table id="tblOptions" width="100%" border="1">
			<Caption><EM>Toggle Layers</EM></Caption>
			<tr>
				<td width="10%"><input type="checkbox" name="chkToggleTerrain"
					value="Toggle Terrain" onclick="toggleTerrain();"></input></td>
				<td width="90%"><span>Google Terrain</span></td>
			</tr>
			<tr>
				<td width="10%"><input type="checkbox"
					name="chkToggleBuildings" value="Toggle Buildings"
					onclick="toggleBuildings();"></input></td>
				<td width="90%"><span>Google Buildings</span></td>
			</tr>
			<tr>
				<td width="10%"><input type="checkbox"
					name="chkToggleRoads" value="Toggle Roads"
					onclick="toggleRoads();" checked></input></td>
				<td width="90%"><span>Google Roads</span></td>
			</tr>
		</table>

		<div align="center">
  			<center>
  				<table border="0" cellspacing="1" width="100%">
   					 <tr>
      					<td width="50%"><button onclick="loadAllBuildings();">Load our building models</button></td>
    				</tr>
    				<tr>
    					<td width="50%"><button onclick="reposPolicecarToMelbourne();">Place
                          the police car</button></td>
    				</tr>
  				</table>
  			</center>
		</div>

		<table width="100%" border="1">
			<tr>
				<td></td>
				<td><input type=button class="button medw"
					onmousedown="gasButtonDown = true;"
					onmouseup="gasButtonDown = false;" value="gas"></input></td>
				<td></td>
			</tr>
			<tr>
				<td><input type=button class="button medw"
					onmousedown="leftButtonDown = true;"
					onmouseup="leftButtonDown = false;" value="left"></input></td>
				<td></td>
				<td><input type=button class="button medw"
					onmousedown="rightButtonDown = true;"
					onmouseup="rightButtonDown = false;" value="right"></input></td>
			</tr>
			<tr>
				<td></td>
				<td><input type=button class="button medw"
					onmousedown="reverseButtonDown = true;"
					onmouseup="reverseButtonDown = false;" value="reverse"></input></td>
				<td></td>
			</tr>
			<tr>
				<td><span>Current Car Speed:</span></td>
				<td></td>
				<td><span id="lblSpeed"></span></td>
			</tr>
		</table>
		
		</td>
	</tr>
</table></div>
</body>